<template>
	<view class="container">
		
		<view class="module fill-base p-24">
			<view class="flex-between m-b-24" >
				<view class="butler" :style="{backgroundImage: 'url('+ $util.img('image/social_1.png') +')'}" @click="goTo('/otherpages/social/classroom?type=0&title='+'健康讲堂')">
					<view class="font-32 c-base text-bold">健康讲堂</view>
					<view class="font-24 c-base" style="opacity: 0.7;">专业化知识   助力健康生活</view>
				</view>
				<view class="butler" :style="{backgroundImage: 'url('+ $util.img('image/social_2.png') +')'}" @click="goTo('/otherpages/social/classroom?type=1&title='+'养生社区')">
					<view class="font-32 c-base text-bold">养生社区</view>
					<view class="font-24 c-base" style="opacity: 0.7;">系统化指导  唤活身体能量</view>
				</view>
			</view>
			<view class="activity">
				<view class="activityItem" :style="{backgroundImage: 'url('+ $util.img(item.image) +')'}" v-for="(item,index) in list" :key="index" @click="goList(item)">
					<view class="font-32 text-bold">{{item.name}}</view>
					<view class="font-24 c-78">{{item.desc}}</view>
					<view class="make" :style="{background: item.bgcolor}">去预约</view>
				</view>
			</view>
		</view>
		
		<view class="detail ">
		  <image :src="$util.img('image/social_title.png')" mode="heightFix" class="title"></image>
		</view>
		
		<view class="modulecon">
			<view class="moduleItem flex m-b-20" v-for="(item,index) in goodsCategory" :key="index" @click="goGoodsList(item)">
			  <image :src="$util.img(item.image)" mode="" class="img m-r-10" lazy-load></image>
			  <view class="">
			  	<view class="title">{{item.category_name}}</view>
			  	<view class="font-24 desc">{{item.description}}</view>
			  </view>
		  	</view>
		  <view class="moduleItem flex m-b-20" v-for="(item,index) in navlist" :key="index" @click="goDesc(item)">
			  <image :src="$util.img(item.icon)" mode="" class="img m-r-10" lazy-load></image>
			  <view class="">
			  	<view class="title">{{item.title}}</view>
			  	<view class="font-24 desc">{{item.sub_title}}</view>
			  </view>
		  </view>
		</view>
		<!-- 登录 -->
		<login-pop ref="loginDialog"></login-pop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					name: '亲子活动',
					desc: '亲子乐趣相伴',
					image: 'image/social_3.png',
					bgcolor: '#b1d340',
					url: '/otherpages/social/childActivity?type=1'
				},{
					name: '社团活动',
					desc: '好友开心相伴',
					image: 'image/social_4.png',
					bgcolor: '#41a044',
					url: '/otherpages/social/childActivity?type=2'
				},{
					name: '展览演出',
					desc: '知友同心相伴',
					image: 'image/social_5.png',
					bgcolor: '#6dc6c2',
					url: '/otherpages/social/childActivity?type=3'
				}],
				navlist: [],
				goodsCategory: []
			}
		},
		onLoad(data) {
			if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
			this.getIndex()
			this.getGoodsCategory()
		},
		methods: {
			goGoodsList(item) {
				this.$util.redirectTo('/otherpages/social/list?category_id='+item.category_id+'&category_name='+item.category_name)
			},
			goTo(url) {
				this.$util.redirectTo(url)
			},
			goList(item) {
				if(item.url) {
					this.$util.redirectTo(item.url+'&title='+item.name)
				}
			},
			goDesc(item) {
				this.$util.redirectTo('/otherpages/social/description?title='+item.title+'&id='+item.service_id)
			},
			getIndex() {
				this.$api.sendRequest({
			      url: "/api/socialize/servicelist",
			      data: {
			        page: 1,
			      },
			      success: res => {
			        if(res.code == 0) {
						this.navlist = res.data.list;
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			getGoodsCategory() {
				this.$api.sendRequest({
			      url: "/api/socialize/categorylists",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.goodsCategory = res.data;
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.module {
	.butler {
		background-position: 100% 100%;
		background-repeat: no-repeat;
		background-size: cover;
		width: 339rpx;
		height: 253rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.activity {
		display: flex;
		justify-content: space-around;
		.activityItem {
			background-position: 100% 100%;
			background-repeat: no-repeat;
			background-size: cover;
			width: 218rpx;
			height: 193rpx;
			border-radius: 20rpx;
			padding: 24rpx;
			box-sizing: border-box;
			.make {
				width: 96rpx;
				height: 43rpx;
				line-height: 43rpx;
				text-align: center;
				background: #635FE7;
				font-size: 22rpx;
				border-radius: 30rpx;
				color: #fff;
				margin-top: 10rpx;
			}
		}
	}
}

.detail {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24rpx 24rpx 24rpx;
  .title {
    width: 199rpx;
    height: 42rpx;
  }
}

.modulecon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 24rpx 24rpx 70rpx;
  
  .moduleItem {
    width: 340rpx;
    // height: 145rpx;
    padding: 28rpx 24rpx;
    box-sizing: border-box;
	background: #fff;
	border-radius: 20rpx;
    .title {
     font-family: "Alibaba PuHuiTi 2.0";
     font-weight: bold;
    }
    .desc {
      color: #788096;
      font-size: 24rpx;
    }
	.img {
		width: 106rpx;
		height: 106rpx;
	}
  }
  
}
</style>
